import {create, modal} from "../../src/storx";
import {createRoot} from "react-dom/client";
import '../../src/storx/init.ts'
import {ReactNode, useEffect, useRef, useState} from "react";

class DialogStore {
	// @state count = 0
  public static controller :{ open:(value:boolean)=>void} ={
		open: (value:boolean)=>{
			console.log("open", value)
		}
  }
	public controller2 = new DialogContrller({openModal:true})
	get controller(){
		return DialogStore.controller
	}
	increment() {
		// this.count++
		this.controller.open(true)
	}
	
	@modal() TestDialog() {
		console.log('Dialog1')
	}
}

const useDialogStore = create(DialogStore)

const instance = useDialogStore()

export const DialogExample = () => {
	const  {controller} = useDialogStore()

  const openDialog = () => {
		controller.open(true)
  }

  return (
    <div className="p-8 max-w-md mx-auto">
      <h1 className="text-2xl font-bold mb-4">自包含 Dialog 示例</h1>
      <button
        onClick={openDialog}
        className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
      >
        打开对话框
      </button>
    </div>
  );
};
createRoot(document.getElementById("root")!).render( <DialogExample />)